<template>
  <el-dialog title="导入试题" :visible.sync="dialogVisible" width="800px">
    <div class="import-wrap">
      <div class="explain">
        <h2>操作说明</h2>
        <ul>
          <li>1、下载 <b @click="handleDownload">Excel格式模板</b> 文件。</li>
          <li>2、请注意格式要求，支持单选题、多选题、判断题等题型。</li>
          <li>
            3、请确保EXCEL文件版本为97-2003，并请勿删除（或新增）模板文件中的列，确保文件能顺利解析。
          </li>
          <li>4、请核对填写日期单元格，其属性为“文本”。</li>
          <li>5、模板数据请勿删除。</li>
        </ul>
      </div>
      <div class="import-form">
        <el-form
          :model="form"
          :rules="rules"
          ref="form"
          label-width="100px"
          class="demo-form"
        >
          <el-row :gutter="20">
            <el-col :span="22">
              <el-form-item label="所属题库" prop="bankId">
                <QuestionBankTitleSelect
                  :defaultValue="form.bankId"
                  @emit="(v) => (form.bankId = v)"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="附件" prop="file">
                <el-upload
                  action=""
                  :http-request="handleImport"
                  :on-change="handleChange"
                >
                  <el-button type="primary" plain size="small">
                    上传文件
                  </el-button>
                  <span class="file-name">{{ form.file.name }}</span>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitForm('form')">导入</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { subjectsImportData } from "@/api/admin/exam/testSubjects";
// import { listFiles } from "@/api/system/files";
export default {
  components: {
    QuestionBankTitleSelect: () =>
      import('@/views/Admin/exam/public/QuestionBankTitleSelect.vue'),
  },
  data() {
    return {
      dialogVisible: false,
      form: {
        bankId: "", //所属题库
        file: "",
      },
      rules: {
        file: [{ required: true, message: "请上传附件", trigger: "change" }],
        bankId: [
          { required: true, message: "请选择所属题库", trigger: "change" },
        ],
      },
    };
  },
  mounted() {
    this.$bus.$on("showDialogImport", () => {
      this.form = this.$options.data().form;
      this.dialogVisible = true;
    });
  },
  beforeDestroy() {
    this.$bus.$off("showDialogImport");
  },
  methods: {
    //下载模板
    async handleDownload() {
      let templatePort = "/testSubjects/down";
      window.location.href = this.baseURL +  templatePort;
      // const loading = this.$loading({
      //   lock: true,
      //   text: "模板下载中，请稍等...",
      //   spinner: "el-icon-loading",
      //   background: "rgba(0, 0, 0, 0.7)",
      // });
      // let res = await listFiles({ type: 11 });
      // if (res.rows.length > 0) {
      //   this.$download.saveAsByUrl(res.rows[0].filePath);
      //   setTimeout(() => {
      //     loading.close();
      //   }, 2000);
      // } else {
      //   this.$modal.msgWarning("暂无模板");
      //   loading.close();
      // }
    },
    handleChange(file) {
      this.form.file = file.raw;
    },
    handleImport() {},
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let formdata = new FormData();
          formdata.append("file", this.form.file);
          formdata.append("bankId", this.form.bankId);
          console.log(formdata);
          subjectsImportData(formdata).then((res) => {
            this.form.file = "";
            this.dialogVisible = false;
            this.$modal.msgSuccess("导入成功");
          });
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
.import-wrap {
  .explain {
    padding: 10px 20px;
    background-color: #f8f8f8;
    border: 1px solid #eee;
    h2 {
      font-size: 16px;
      color: #333;
    }
    ul {
      li {
        font-size: 14px;
        line-height: 2;
        color: #666;
        b {
          color: var(--current-color);
          border-bottom: 1px solid var(--current-color);
          cursor: pointer;
        }
      }
    }
  }
  .import-form {
    margin-top: 20px;
    width: 800px;
    .file-name {
      margin-left: 20px;
      color: #333;
    }
  }
}
</style>
<style scoped>
.import-form >>> .el-upload-list {
  display: none;
}
</style>